<!-- 巡查分类编辑弹窗 -->
<template>
  <el-dialog
      :title="isUpdate?'修改巡查分类':'添加巡查分类'"
      :visible="visible"
      width="420px"
      :destroy-on-close="true"
      :lock-scroll="false"
      @update:visible="updateVisible">
    <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="100px">
      <el-form-item label="所属模块:" prop="model_type">
        <el-radio-group v-model="form.model_type" size="small">
          <el-radio-button v-for="(typeLabel, type) in moduleMap" disabled :label="type" :key="type">
            {{ typeLabel }}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="单位:" prop="unit_id">
        <el-input v-if="parent && parent.id > 0" :value="parent.unit_name" disabled />
        <el-select v-else v-model="form.unit_id"  :loading="unitLoading" class="ele-block" placeholder="请选择单位">
          <el-option v-for="item in unit" :key="item.id" :label="item.unit_name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上级分类:" prop="pid">
<!--        <el-select v-model="form.pid" class="ele-block" placeholder="请选择">-->
<!--          <el-option v-for="item in top" :key="item.id" :label="item.name" :value="item.id">-->
<!--          </el-option>-->
<!--        </el-select>-->
        <el-input :value="parent ? parent.name : '顶级分类'" disabled />
      </el-form-item>
      <el-form-item label="名称:" prop="name">
        <el-input v-model="form.name" :maxlength="20" placeholder="请输入巡查分类名称" />
      </el-form-item>
      <el-form-item label="状态:">
        <el-switch v-model="form.status" :active-value="2" :inactive-value="1" active-text="启用" inactive-text="停用">
        </el-switch>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button type="primary" @click="save" :loading="loading">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>

export default {
  name: 'AbnormalEdit',
  props: {
    visible: Boolean,
    data: Object,
    parent: Object
  },
  data() {
    return {
      form: {
        unit_id: 0,
        model_type: '',
        pid: 0,
        name: '',
        status: 2,
        level: 1
      },
      rules: {
        unit_id: [
          {required: true, message: '请选择所属单位', trigger: 'blur'}
        ],
        model_type: [
          {required: true, message: '请选择所属模块', trigger: 'blur'}
        ],
        pid: [
          {required: true, message: '请选择上级分类', trigger: 'blur'}
        ],
        name: [
          {required: true, message: '请输入巡查分类名称', trigger: 'blur'}
        ]
      },
      moduleMap: {
        emergency: '应急',
        protection: '环保',
        illegal: '违建',
        way: '道路交通'
      },
      unitLoading: false,
      unit: [],
      topLoading: false,
      top: [{id: 0, name: '顶级分类'}],
      loading: false,
      isUpdate: false
    }
  },
  watch: {
    data: {
      handler(val) {
        if (val) {
          this.form = Object.assign({}, val)
          this.isUpdate = true
        } else {
          this.isUpdate = false
        }
      },
      immediate: true
    },
    parent: {
      handler(val) {
        if (val) {
          this.form.model_type = val.model_type
          if (val.id > 0) {
            this.form.pid = val.id
            this.form.unit_id = val.unit_id
          }
        } else {
          this.form.pid = 0
        }
      },
      immediate: true
    },
    'form.model_type': {
      handler(val) {
        if (!this.parent || this.parent.id < 0) {
          this.getUnit(val)
        }
      },
      deep: true,
      immediate: true
    },
    // 'form.unit_id': {
    //   handler() {
    //     this.getTop()
    //   },
    //   deep: true,
    //   immediate: true
    // }
  },
  methods: {
    getUnit(type) {
      if (this.unitLoading || !type) {
        return
      }
      if (!this.isUpdate) {
        this.form.unit_id = null
        this.form.pid = 0
        this.top = []
      }
      this.unitLoading = true
      this.$http.get('/unit/index?page=1&limit=999&model_type=' + type).then(res => {
        this.unit = res.data.data
        this.unitLoading = false
      })
    },
    getTop() {
      if (this.topLoading || !this.form.unit_id) {
        return
      }
      this.topLoading = true
      if (!this.isUpdate) {
        this.form.pid = 0
      }
      this.$http.get('/abnormal/index?page=1&limit=999&level=1&model_type=' + this.form.model_type + '&unit_id=' + this.form.unit_id).then(res => {
        this.top = res.data.data
        this.top.unshift({id: 0, name: '顶级分类'})
        this.topLoading = false
      })
    },

    normalizer(d) {
      return {
        id: d.id,
        label: d.name,
        children: d.children || undefined
      };
    },
    /* 保存编辑 */
    save() {
      console.log(this.form)
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (!this.isUpdate) {
            if (this.parent && typeof this.parent.level != 'undefined') {
              this.form.level = this.parent.level + 1
              if (this.parent.parent_tree) {
                this.form.parent_tree = this.parent.parent_tree + ',' + this.parent.id
              } else {
                this.form.parent_tree = this.parent.id
              }
            } else {
              this.form.level = 1
            }
          }
          this.loading = true
          this.$http.post('/abnormal/edit', this.form).then(res => {
            this.loading = false;
            if (res.data.code === 0) {
              this.$message.success(res.data.msg)
              if (!this.isUpdate) {
                this.form = {}
              }
              this.updateVisible(false)
              this.$emit('done')
            } else {
              this.$message.error(res.data.msg)
            }
          }).catch(e => {
            this.loading = false
            this.$message.error(e.message)
          });
        } else {
          return false
        }
      })
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    }
  }
}
</script>

<style scoped>
</style>
